export default function initCanvas(params: string, number = 1) {
  const colorList = ['#7D07F2', '#3D6AF2', '#F2E205', '#A6ABAB', '#23D9B7']
  const dom = document.getElementById(params) as HTMLCanvasElement
  /**
   * 样式强制全屏
   */
  dom.width = window.innerWidth
  dom.height = window.innerHeight
  dom.style.background = '#2775b6'
  dom.style.zIndex = '-1'
  dom.style.position = 'absolute'
  dom.style.top = '0'
  dom.style.left = '0'
  const bodyDom = document.body as HTMLBodyElement
  bodyDom.style.position = 'relative'
  //开始绘制
  const ctx = dom.getContext('2d') as CanvasRenderingContext2D
  ctx.shadowBlur = 0.5
  //设置或返回用于填充绘画的颜色、渐变或模式。
  // ctx.fillStyle = '#ccc'
  //绘制"被填充"的矩形。
  /**
   * fillRect(x, y, w, h)
   * x	矩形左上角的 x 坐标。
   * y	矩形左上角的 y 坐标。
   * w	矩形的宽度，以像素计。
   * h 矩形的高度，以像素计。
   */
  // ctx?.fillRect(0, 0, bodyDom.clientWidth, bodyDom.clientHeight)

  /**
   * x	圆的中心的 x 坐标。
   * y	圆的中心的 y 坐标。
   * r	圆的半径。
   * sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
   * eAngle	结束角，以弧度计。
   * counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
   */
  // ctx?.arc(200, 300, 100, 0, 2 * Math.PI, false)
  // ctx.stroke()

  /**
   * 封装一个生成小球的函数
   */
  class Ball {
    /**
     * x y 定位    r 半径 color  颜色
     * dx  每次移动的水平距离
     * dy  每次移动的垂直距离
     */
    private x: number
    private y: number
    private dx: number
    private dy: number
    private r: number
    private color: string
    constructor(x: number, y: number, dx: number, dy: number, r: number, color: string) {
      this.x = x
      this.y = y
      this.dx = dx
      this.dy = dy
      this.r = r
      this.color = color
    }

    createBall = () => {
      /**
       * beginPath() 方法开始一条路径，或重置当前的路径
       */
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
      ctx.fillStyle = this.color
      ctx.fill()
    }
    move = () => {
      // 如果半径加位置大于画布的宽 或者 位置减半径小于0  那就将dx取负  然后定位x  再+=
      // 效果 当球移动到最右  dx为-  那x就会递减  反之同理
      if (this.x + this.r > dom.width || this.x - this.r < 0) {
        this.dx = -this.dx
      }
      if (this.y + this.r > dom.height || this.y - this.r < 0) {
        this.dy = -this.dy
      }
      this.x += this.dx
      this.y += this.dy
      this.createBall()
    }
  }

  // const ball = new Ball(300, 300, 10, 10, 40, 'red')
  // animate()
  const ballList: any[] = []
  // 根据数值来生成对应的小球数量
  for (let i = 0; i < number; i++) {
    ballList.push(
      new Ball(
        Math.floor(Math.random() * window.innerWidth),
        Math.floor(Math.random() * window.innerHeight),
        Math.floor((Math.random() - 0.5) * 10),
        Math.floor((Math.random() - 0.5) * 10),
        Math.floor((Math.random() + 0.2) * 10),
        colorList[Math.floor(Math.random() * colorList.length)]
      )
    )
  }

  //  移动动画
  const animate = () => {
    // 按帧加载  类似setIntervel
    requestAnimationFrame(animate)
    /**
     * clearRect 在给定的矩形内清除指定的像素。
     * x	要清除的矩形左上角的 x 坐标。
     * y	要清除的矩形左上角的 y 坐标。
     * width	要清除的矩形的宽度，以像素计。
     * height	要清除的矩形的高度，以像素计。
     */
    ctx.clearRect(0, 0, dom.width, dom.height)
    ballList.forEach(item => {
      item.move()
    })

    /**
     * closePath 创建从当前点回到起始点的路径。
     */
    // ctx.closePath()
  }
  animate()
}
